<template>
  <div class="w-full h-full mt-[70px] no-scrollbar">
    <!-- PC端 -->
    <div class="w-full hidden md:flex direction-column">
      <div class="w-full flex justify-center relative">
        <el-image class="w-[100%] h-[658px]" :src="bgImgPath?.bgImg27" lazy />
        <div
          class="w-full absolute top-1/2 left-1/3 transform -translate-x-1/2 -translate-y-1/2 flex items-center justify-center p-4"
        >
          <div class="text-blue-600 text-center">
            <div
              class="text-[70px] md:text-[85px] mb-4 font-bold text-[#ff6839]"
            >
              {{ servicesConfig?.title }}
            </div>
          </div>
        </div>
      </div>
      <div class="w-full bg-[#f2f2f2]">
        <div
          class="w-full container flex justify-center relative mt-[16px] p-4"
        >
          <el-image :src="iconPath?.icon12" lazy />
          <div class="ml-4">
            <div
              class="text-[25px] text-white font-bold bg-[#3498db] px-6 w-fit mt-[18px]"
            >
              {{ servicesConfig?.items[0].title }}
            </div>
            <div class="text-[15px] text-gray-600 mt-2">
              {{ servicesConfig?.items[0].description }}
            </div>
            <div
              class="text-[25px] text-white font-bold bg-[#3498db] px-6 w-fit mt-6"
            >
              {{ servicesConfig?.items[1].title }}
            </div>
            <div class="text-[15px] text-gray-600 mt-2">
              {{ servicesConfig?.items[1].description }}
            </div>
            <div
              class="text-[25px] text-white font-bold bg-[#3498db] px-6 w-fit mt-6"
            >
              {{ servicesConfig?.items[2].title }}
            </div>
            <div class="text-[15px] text-gray-600 mt-2">
              {{ servicesConfig?.items[2].description }}
            </div>
            <div
              class="text-[25px] text-white font-bold bg-[#3498db] px-6 w-fit mt-6"
            >
              {{ servicesConfig?.items[3].title }}
            </div>
            <div class="text-[15px] text-gray-600 mt-2">
              {{ servicesConfig?.items[3].description }}
            </div>
          </div>
        </div>
      </div>
      <div
        class="w-full container flex justify-center relative mt-[16px] gap-4 p-4"
      >
        <el-image class="flex-1" :src="bgImgPath?.bgImg22" lazy />
        <div class="flex-1 bg-[#87CEFA] flex direction-column">
          <div class="text-[25px] text-white font-bold mb-2">
            {{ servicesConfig?.TeamStrength }}
          </div>
          <div class="text-[15px] pl-8 pr-8 text-white">
            {{ servicesConfig?.TeamStrengthDesc }}
          </div>
        </div>
        <el-image class="flex-1" :src="bgImgPath?.bgImg23" lazy />
      </div>
      <div
        class="w-full container flex justify-center relative mt-[16px] gap-4 pl-4 pr-4"
      >
        <el-image class="flex-1" :src="bgImgPath?.bgImg24" lazy />
        <el-image class="flex-1" :src="bgImgPath?.bgImg25" lazy />
        <div class="flex-1 flex direction-column">
          <div class="text-[25px] font-bold mb-2">
            {{ servicesConfig?.serviceMindset }}
          </div>
          <div class="text-[15px] pl-8 pr-8">
            {{ servicesConfig?.serviceMindsetDesc }}
          </div>
        </div>
      </div>
      <section>
        <div
          class="w-full relative container mx-auto p-4"
        >
          <el-image class="w-[100%]" :src="bgImgPath?.bgImg11" lazy />
          <div
            class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 font-bold text-white bg-black/50 p-4 rounded-lg"
          >
            <div class="text-[50px] font-bold text-center">
              {{ servicesConfig?.logistics }}
            </div>
            <div class="">
              <p
                class="text-[15px]"
                v-for="item in servicesConfig?.logisticsDesc"
              >
                {{ item }}
              </p>
            </div>
          </div>
        </div>
      </section>
      <section>
        <div class="w-full relative container mx-auto p-4 mt-[-16px]">
          <el-image class="w-[100%]" :src="bgImgPath?.bgImg12" lazy />
          <div
            class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 font-bold text-white bg-black/50 p-4 rounded-lg"
          >
            <div
              v-if="currentLanguage === 'en'"
              class="text-center text-[50px]"
            >
              {{ servicesConfig?.install }}
            </div>
            <div v-else class="text-[50px] text-center">
              {{ servicesConfig?.install }}
            </div>
            <div class="">
              <p
                class="text-[15px]"
                v-for="item in servicesConfig?.installDesc"
              >
                {{ item }}
              </p>
            </div>
          </div>
        </div>
      </section>
      <section>
        <div class="w-full relative container mx-auto p-4 mt-[-16px]">
          <el-image class="w-[100%]" :src="bgImgPath?.bgImg13" lazy />
          <div
            class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 font-bold text-white bg-black/50 p-4 rounded-lg"
          >
            <div class="text-[50px] text-center">
              {{ servicesConfig?.warehouse }}
            </div>
            <div class="">
              <p
                class="text-[15px]"
                v-for="item in servicesConfig?.warehouseDesc"
              >
                {{ item }}
              </p>
            </div>
          </div>
        </div>
      </section>
    </div>
    <!-- 移动端 -->
    <div class="md:hidden">
      <ServicesMobile></ServicesMobile>
    </div>
    <ContactUs></ContactUs>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted } from "vue";
import { useConfig } from "@/composables/useConfig";
import bgImgPath from "./bgImgPath/index";
import iconPath from "./bgImgPath/iconPath";
import ContactUs from "./ContactUs.vue";
import ServicesMobile from "./ServicesMobile.vue";
import { useI18n } from "vue-i18n";

const { getServicesConfig } = useConfig();
const { locale } = useI18n();
const servicesConfig = computed(() => getServicesConfig());
const currentLanguage = computed(() => locale.value);

onMounted(() => {});
</script>

<style scoped>
/* 隐藏所有方向的滚动条 */
.no-scrollbar {
  /* width: 100vw;
  height: calc(100vh); */
  overflow-y: auto;
  -ms-overflow-style: none;
  /* IE/Edge */
  scrollbar-width: none;
  /* Firefox */
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Edge */
}

/* 自定义样式 */
.direction-column {
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>
